<!-- 文本三元组标注结果 -->
<template>
  <a-spin :spinning="relationListLoading">
    <div v-if="relationResultList.length" class="dmp-relation-result">
      <div
        v-for="item in relationResultList"
        :key="item?.uid"
        class="dmp-relation-result-wrap"
        @mouseenter="mouseenter(item)"
        @mouseleave="mouseleave(item)"
      >
        <div class="dmp-relation-result-header">
          <h4>{{ item?.relationLabel?.name }}</h4>
          <div class="icon-btn-list">
            <a-dropdown v-model:open="entityDropdownOpen" :get-popup-container="(node: any) => node.parentNode" placement="bottom">
              <a-button type="text" class="icon-only-btn" @mouseenter.stop="handleUpdate(item)">
                <i class="iconfont icon-edit-line"></i>
              </a-button>
              <template #overlay>
                <select-entity-label
                  :list="relationLabelList"
                  :loading="selectLoading"
                  title="请选择关系类别标签"
                  @menu-click="(params: MarkTaskLabelRes) => selectRelLabel(item, params)"
                />
              </template>
            </a-dropdown>
            <a-button type="text" class="icon-only-btn" @click.stop="handleDelete(item)">
              <i class="iconfont icon-delete-bin-6-line"></i>
            </a-button>
          </div>
        </div>
        <div class="dmp-relation-result-content">
          <div class="result-content-start">
            <div class="result-content-start-title">起始:</div>
            <div class="result-content-start-tag">
              <dmp-label :show-remove-button="false" :color="item?.startLabel?.labelColor" :title="item?.startLabel?.labelName" />
            </div>
            <div class="result-content-start-content" :title="item?.startLabel?.text">{{ item?.startLabel?.text }}</div>
          </div>
          <div class="result-content-end">
            <div class="result-content-start-title">终止:</div>
            <div class="result-content-start-tag">
              <dmp-label :show-remove-button="false" :color="item?.endLabel?.labelColor" :title="item?.endLabel?.labelName" />
            </div>
            <div class="result-content-start-content" :title="item?.endLabel?.text">{{ item?.endLabel?.text }}</div>
          </div>
        </div>
      </div>
    </div>
    <default-image v-else title="暂无内容" />
  </a-spin>
</template>

<script setup lang="ts">
  // import { Modal } from 'ant-design-vue'
  import { storeToRefs } from 'pinia'
  import { ref } from 'vue'
  import { useRequest } from 'vue-request'

  // import WarnIcon from '@/components/icon/IconWarning/index.vue'
  import { textLabelTagApi } from '@/services/index'
  import { hexToRgb } from '@/utils'

  import DmpLabel from '../../components/DmpLabel.vue'
  import { MarkTaskLabelRes } from '../../components/LabelCard/types'
  import SelectEntityLabel from '../../components/SelectEntityLabel.vue'
  import { RelationResultType, useLabelResultListStore } from '../store/index'
  // import { EntityLabelLocationInfo } from '../utils/dmp-text/config'
  const labelResultListStore = useLabelResultListStore()

  const { relationResultList, relationListLoading } = storeToRefs(labelResultListStore)

  const emits = defineEmits<{
    (event: 'remove', data: RelationResultType): void
  }>()

  const { loading: selectLoading, runAsync: runGetMarkTaskLabels } = useRequest(textLabelTagApi.getMarkTaskLabels)
  const relationLabelList = ref([])
  const handleUpdate = async (item: RelationResultType) => {
    const { data } = (await runGetMarkTaskLabels({
      beginLabelId: item.startLabel.labelId,
      endLabelId: item.endLabel.labelId
    })) as any
    relationLabelList.value = data
  }

  const handleDelete = (item: RelationResultType) => {
    labelResultListStore.removeRelationResult(item)
    mouseleave(item)
    emits('remove', item)
  }

  // 更新关系标签
  const entityDropdownOpen = ref(false)
  const selectRelLabel = (item: RelationResultType, params: MarkTaskLabelRes) => {
    labelResultListStore.updateRelationResult(item, params)
    entityDropdownOpen.value = false
  }

  // 鼠标移入
  const mouseenter = (item: RelationResultType) => {
    const dmpTextWrap = document.getElementById('dmp-text-wrap')
    const { startLabel, endLabel } = item
    // 根据属性查找
    const startLabelDom = dmpTextWrap?.querySelector(`[data-only-id="${startLabel.onlyId}"]`)
    updateSpan(startLabelDom, (prevNode: any) => {
      prevNode.style.background = hexToRgb(startLabel.labelColor, 0.1)
    })
    // 根据属性查找
    const endLabelDom = dmpTextWrap?.querySelector(`[data-only-id="${endLabel.onlyId}"]`)
    updateSpan(endLabelDom, (prevNode: any) => {
      prevNode.style.background = hexToRgb(endLabel.labelColor, 0.1)
    })
  }

  // 鼠标移出
  const mouseleave = (item: RelationResultType) => {
    const dmpTextWrap = document.getElementById('dmp-text-wrap')
    const { startLabel, endLabel } = item
    // 根据属性查找
    const startLabelDom = dmpTextWrap?.querySelector(`[data-only-id="${startLabel.onlyId}"]`)
    updateSpan(startLabelDom, (prevNode: any) => {
      prevNode.style.background = 'transparent'
    })
    // 根据属性查找
    const endLabelDom = dmpTextWrap?.querySelector(`[data-only-id="${endLabel.onlyId}"]`)
    updateSpan(endLabelDom, (prevNode: any) => {
      prevNode.style.background = 'transparent'
    })
  }

  /**
   * 更新指定节点前span标签样式
   */
  const updateSpan = (node: any, func: Function) => {
    let prevNode = node?.previousElementSibling
    while (prevNode && prevNode.nodeName === 'SPAN' && prevNode?.getAttribute('data-selection') === 'true') {
      func(prevNode)
      prevNode = prevNode.previousElementSibling
    }
  }
</script>

<style lang="less" scoped>
  .dmp-relation-result {
    width: 100%;
    height: 100%;
  }

  .dmp-relation-result-wrap {
    margin-bottom: 8px;
    width: 100%;
    background: @background3;
    border: 1px solid @mask1;
    border-radius: 6px;

    &:last-child {
      margin-bottom: 0;
    }

    &:hover {
      .dmp-relation-result-header {
        .icon-btn-list {
          display: flex;
        }
      }
    }

    .dmp-relation-result-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 12px;
      width: 100%;
      height: 34px;
      background: @background2;
      border-bottom: 0.5px solid @border1;
      border-radius: 6px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;

      h4 {
        margin-right: 6px;
        height: 34px;
        font-size: 14px;
        color: @text01;
        font-weight: 400;
        line-height: 34px;
        .elliptical-1();
      }

      .icon-btn-list {
        display: none;
        gap: 0 16px;
      }
    }

    .dmp-relation-result-content {
      padding: 8px 12px 10px;
      width: 100%;

      .result-content-start,
      .result-content-end {
        display: flex;
        align-items: center;

        .result-content-start-title {
          width: 36px;
          font-size: 12px;
          color: @text03;
          font-weight: 400;
          flex-shrink: 0;
        }

        .result-content-start-tag {
          margin-right: 4px;
          max-width: 84px;
          height: 24px;
          flex-shrink: 0;
        }

        .result-content-start-content {
          font-size: 14px;
          font-weight: 400;
          color: @text01;
          .elliptical-1();
        }
      }

      .result-content-end {
        margin-top: 8px;
      }
    }
  }
</style>
